<template>
	 <view @click="onClickAvatar" :class="animateIn?'animation-in':'animation-out'"  style="box-shadow: 0 0 4px 1px #77777766 ;z-index: 900;background-color: white;position: fixed;right: 0;bottom: 12%;border-radius: 100px 0 0 100px;">
	 	<view style="padding: 6rpx;border-radius: 100px;border: solid 1rpx #ddd;">
	 		<u-avatar :src="absUrl(`/static/avatars/3.jpg`)" size="50"></u-avatar>
	 	</view>
	 </view>
</template>

<script>
	export default {
		name:"FloatNav",
		data() {
			return {
				avatarInterval:null,
				animateIn:false,
			};
		},
		methods:{
			onClickAvatar(){
				if(this.animateIn && this.avatarInterval)
				{
					this.animateIn = !this.animateIn
					clearTimeout(this.avatarInterval)
					this.avatarInterval = null
				}else if(!this.animateIn && !this.avatarInterval) {
					this.animateIn = !this.animateIn
					
					let that = this
					this.avatarInterval = setTimeout(()=>{
						this.animateIn = false
						that.avatarInterval = null
					},2000)
				}
			},
		}
	}
</script>

<style scoped>
	.animation-in
	{
		transform: translateX(0px);
		transition: transform 0.2s ease-in-out;
	}
	
	.animation-out {
		transform: translateX(35px);
		transition: transform 0.5s ease-in-out;
	}
</style>